<template>
  <div>
    <Heading :level="1">hello JSX</Heading>
    <transition
      enter-active-class="animate__animated animate__zoomIn"
      leave-active-class="animate__animated animate__zoomOut"
    >
      <h3 v-if="isAnimated">动画搞一下</h3>
    </transition>
    <input v-model="message" />
    <button @click="show">Alert</button>
    <button @click="animated">Animated</button>
    <Rate class="star" :value="rate" @update-rate="updateRate" />
    <Rate2 v-model="rate" />
  </div>
</template>

<script>
import { ref, getCurrentInstance } from 'vue';
import Rate from '../components/Rate.vue';
import Rate2 from '../components/Rate2.vue';
import Heading from '../components/Heading.jsx';

export default {
  name: 'Home',
  components: {
    [Rate.name]: Rate,
    [Rate2.name]: Rate2,
    Heading,
  },
  setup(props, { attrs, slots, emit }) {
    const { proxy } = getCurrentInstance();

    let isAnimated = ref(false);
    let rate = ref(3.5);
    let message = ref('Text to copy!');

    const animated = () => {
      isAnimated.value = !isAnimated.value;
    };

    const show = () => {
      proxy
        .$copyText(message.value)
        .then(
          (res) => {
            console.log(res);
            proxy.$Swal.fire('Copy successfully', res.text, 'success');
          },
          (e) => {
            proxy.$Swal.fire('Copy failed', e, 'error');
          }
        )
        .catch((e) => {
          proxy.$Swal.fire('Copy failed', e, 'error');
        });
    };

    const updateRate = (value) => {
      rate.value = value;
    };

    function fib(n) {
      if (n <= 1) return 1;
      return fib(n - 1) + fib(n - 2);
    }
    let count = ref(fib(38));

    return {
      isAnimated,
      message,
      animated,
      show,
      rate,
      updateRate,
    };
  },
};
</script>

<style scoped>
.star {
  position: absolute;
  animation: shake 1s 1;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(-9px);
  }

  20% {
    transform: translateX(8px);
  }

  30% {
    transform: translateX(-7px);
  }

  40% {
    transform: translateX(6px);
  }

  50% {
    transform: translateX(-5px);
  }

  60% {
    transform: translateX(4px);
  }

  70% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(2px);
  }

  90% {
    transform: translateX(-1px);
  }
}
</style>
